<template>
  <div class="a3-page">
    <div class="tool-view">
      <div class="tool-l">
        <n-input
          style="width: 100%"
          placeholder="输入关键字搜索"
          v-model:value="keyWord"
        />
        <n-button style="margin-left: 12px" type="success" @click="searchFun">
          查询
        </n-button>
      </div>
    </div>
    <div ref="container" class="table-view">
      <n-data-table
        remote
        :loading="loading"
        :data="data"
        :columns="columns"
        :single-line="false"
        :pagination="pagination"
        :max-height="height"
        @update:page="handlePageChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import { GetUserLoginInfo } from "@/server";
import { useAppStore } from "@/store/modules/user";

const store = useAppStore();
const data = ref([]) as any;
const columns = ref([
  // {
  //   title: "序号",
  //   key: "id",
  //   titleAlign: "center",
  // },
  {
    title: "账号名称",
    key: "account",
    titleAlign: "center",
  },
  {
    title: "部门",
    key: "department",
    titleAlign: "center",
  },
  {
    title: "工号",
    key: "workNumber",
    titleAlign: "center",
  },
  {
    title: "时间",
    key: "creatTime",
    titleAlign: "center",
  },
]) as any;
const loading = ref(false);
const dataList = ref([]) as any; //手动添加数据
const pagination = ref({
  page: 1,
  pageCount: 1,
  pageSize: 20,
  pageSlot: 7,
});
const keyWord = ref("");
const text = ref("");
const height = ref(0);
const container = ref(null) as any;
const updateHeight = () => {
  const containerHeight = container.value.offsetHeight;
  console.log("Container Height:", containerHeight);
  height.value = containerHeight;
};
const searchFun = () => {
  text.value = keyWord.value;
  pagination.value.page = 1;
  GetUserLoginInfoFun();
};
onMounted(() => {
  updateHeight();
  window.addEventListener("resize", updateHeight);

  // Cleanup listener on component unmount
  return () => {
    window.removeEventListener("resize", updateHeight);
  };
});
const lock = ref(false);
const unLock = () => {
  setTimeout(() => {
    lock.value = false;
  }, 1000);
};
const handlePageChange = (curent: number) => {
  pagination.value.page = curent;
  GetUserLoginInfoFun();
};

//获取历史记录
const GetUserLoginInfoFun = async () => {
  if (lock.value) {
    return false;
  }
  lock.value = true;
  const res: any = await GetUserLoginInfo({
    keyWord: text.value,
    pageNumber: pagination.value.page,
    pageSize: 20,
  });
  if (res.result.isSuccess) {
    data.value = res.result.result;
    pagination.value.pageCount = Math.ceil(res.result.otherResult / 20);
    unLock();
  } else {
    unLock();
    store.error(res.result.message); // 错误提示
  }
};
GetUserLoginInfoFun();
</script>

<style lang="less" scoped>
.a3-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 2.4rem);
  overflow: hidden;
  :deep(.n-input) {
    --n-color: none !important;
    --n-color-focus: #60676c !important;
    --n-text-color: rgb(255, 255, 255) !important;
    --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  :deep(.n-pagination-item) {
    color: #fff;
  }

  .tool-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(32px);

    .tool-l {
      padding: 0.5rem;
      display: flex;
      align-items: center;
      flex: 1;

      span {
        font-size: 18px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #1c262d;
        line-height: 25px;
        margin: 0 12px 0 28px;
      }
    }

    .tool-r {
      padding-right: 30px;
    }
  }

  .table-view {
    height: calc(100% - 10rem);

    :deep(.n-data-table) {
      border: none;
      --n-merged-border-color: rgba(0, 0, 0, 0);
      .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td {
        background: #61676c;
      }
      .n-data-table-tr:not(.n-data-table-tr--summary):hover {
        background: #394248;
      }
      .n-data-table-thead {
        background: #394248;
      }
      .n-data-table-th {
        background: none;
        color: #ffffff;
        border-right: 1px solid #394248;
        border-bottom: 1px solid #394248;
        font-size: 0.725rem;
      }
      .n-data-table-td {
        background: #61676c;
        color: #ffffff;
        border-right: 1px solid #394248;
        border-bottom: 1px solid #394248;
        font-size: 0.725rem;
      }
      .n-data-table__pagination {
        justify-content: center;
      }
    }
  }
  :deep(
      .n-pagination-item.n-pagination-item--disabled.n-pagination-item--button
    ) {
    background-color: rgb(175 175 178);
  }
}

:deep(.n-data-table-td) {
  text-align: center;
}
</style>
